<template>
  <div class="plan-detail">
    <header class="header">
      <div class="header-content">
        <h1>{{ plan.title }}</h1>
        <span :class="['status-badge', plan.status]">{{ getStatusText(plan.status) }}</span>
      </div>
      <div class="header-actions">
        <router-link
          v-if="plan.status === 'active'"
          :to="`/check-in/${plan.id}`"
          class="check-in-btn"
        >
          打卡
        </router-link>
      </div>
    </header>

    <div class="detail-content">
      <section class="info-section">
        <div class="info-card">
          <h2>计划信息</h2>
          <div class="info-item">
            <span class="label">计划描述：</span>
            <span>{{ plan.description }}</span>
          </div>
          <div class="info-item">
            <span class="label">打卡类型：</span>
            <span>{{ getTypeText(plan.type) }}</span>
          </div>
          <div class="info-item">
            <span class="label">开始时间：</span>
            <span>{{ formatDate(plan.startDate) }}</span>
          </div>
          <div class="info-item">
            <span class="label">结束时间：</span>
            <span>{{ formatDate(plan.endDate) }}</span>
          </div>
          <div class="info-item">
            <span class="label">创建时间：</span>
            <span>{{ formatDate(plan.createdAt) }}</span>
          </div>
        </div>

        <div class="progress-card">
          <h2>完成进度</h2>
          <ProgressBar
            :current="plan.completedDays"
            :total="plan.totalDays"
            text="完成天数"
          />
          <div class="progress-stats">
            <div class="stat-item">
              <div class="stat-value">{{ plan.completedDays }}</div>
              <div class="stat-label">已完成</div>
            </div>
            <div class="stat-item">
              <div class="stat-value">{{ plan.totalDays - plan.completedDays }}</div>
              <div class="stat-label">剩余</div>
            </div>
            <div class="stat-item">
              <div class="stat-value">{{ plan.continuousDays }}</div>
              <div class="stat-label">连续打卡</div>
            </div>
          </div>
        </div>
      </section>

      <section class="calendar-section">
        <h2>打卡日历</h2>
        <Calendar />
      </section>

      <section class="history-section">
        <h2>打卡记录</h2>
        <div class="history-list" v-if="plan.history.length > 0">
          <div
            v-for="record in plan.history"
            :key="record.date"
            class="history-item"
          >
            <div class="history-date">
              <div class="date">{{ formatDate(record.date) }}</div>
              <div class="time">{{ formatTime(record.time) }}</div>
            </div>
            <div class="history-content">
              <div class="status-icon" :class="{ 'on-time': record.onTime }">
                {{ record.onTime ? '✓' : '!' }}
              </div>
              <div class="record-text">
                {{ record.onTime ? '按时打卡' : '补卡' }}
              </div>
              <div class="record-note" v-if="record.note">
                {{ record.note }}
              </div>
            </div>
          </div>
        </div>
        <div v-else class="empty-history">
          暂无打卡记录
        </div>
      </section>
    </div>
  </div>
</template>

<script>
import Calendar from '@/components/CheckInCalendar.vue'
import ProgressBar from '@/components/ProgressBar.vue'

export default {
  name: 'PlanDetail',
  components: {
    Calendar,
    ProgressBar
  },
  data() {
    return {
      plan: null
    }
  },
  created() {
    // TODO: 从Vuex获取数据
    // 模拟数据
    this.plan = {
      id: this.$route.params.id,
      title: '每日阅读',
      description: '每天阅读30分钟，提升自己',
      type: 'daily',
      status: 'active',
      startDate: '2024-01-01',
      endDate: '2024-01-30',
      createdAt: '2024-01-01',
      completedDays: 15,
      totalDays: 30,
      continuousDays: 5,
      history: [
        {
          date: '2024-01-15',
          time: '08:30:00',
          onTime: true,
          note: '今天读完了一章'
        },
        {
          date: '2024-01-14',
          time: '23:50:00',
          onTime: false,
          note: '差点忘记打卡了'
        }
      ]
    }
  },
  methods: {
    getStatusText(status) {
      const statusMap = {
        active: '进行中',
        completed: '已完成',
        expired: '已过期'
      }
      return statusMap[status] || status
    },
    getTypeText(type) {
      const typeMap = {
        daily: '每日打卡',
        weekly: '每周打卡',
        monthly: '每月打卡'
      }
      return typeMap[type] || type
    },
    formatDate(date) {
      return new Date(date).toLocaleDateString('zh-CN')
    },
    formatTime(time) {
      return time.substring(0, 5)
    }
  }
}
</script>

<style scoped>
.plan-detail {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
}

.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 30px;
}

.header-content {
  display: flex;
  align-items: center;
  gap: 15px;
}

.header h1 {
  margin: 0;
  color: #333;
}

.status-badge {
  padding: 4px 12px;
  border-radius: 15px;
  font-size: 14px;
  font-weight: 500;
}

.status-badge.active {
  background-color: #e3f2fd;
  color: #1976d2;
}

.status-badge.completed {
  background-color: #e8f5e9;
  color: #2e7d32;
}

.status-badge.expired {
  background-color: #fbe9e7;
  color: #d32f2f;
}

.check-in-btn {
  background-color: #4caf50;
  color: white;
  padding: 10px 20px;
  border-radius: 20px;
  text-decoration: none;
  transition: background-color 0.3s;
}

.check-in-btn:hover {
  background-color: #45a049;
}

.detail-content {
  display: grid;
  gap: 30px;
}

.info-section {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 20px;
}

.info-card,
.progress-card {
  background: white;
  padding: 20px;
  border-radius: 10px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.info-card h2,
.progress-card h2,
.calendar-section h2,
.history-section h2 {
  margin: 0 0 20px;
  color: #333;
  font-size: 18px;
}

.info-item {
  margin-bottom: 15px;
  font-size: 14px;
}

.info-item .label {
  color: #666;
  margin-right: 8px;
}

.progress-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 15px;
  margin-top: 20px;
  text-align: center;
}

.stat-item {
  padding: 15px;
  background-color: #f5f5f5;
  border-radius: 8px;
}

.stat-value {
  font-size: 24px;
  font-weight: bold;
  color: #4caf50;
  margin-bottom: 5px;
}

.stat-label {
  font-size: 12px;
  color: #666;
}

.calendar-section {
  background: white;
  padding: 20px;
  border-radius: 10px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.history-section {
  background: white;
  padding: 20px;
  border-radius: 10px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.history-list {
  display: grid;
  gap: 15px;
}

.history-item {
  display: flex;
  gap: 20px;
  padding: 15px;
  background-color: #f5f5f5;
  border-radius: 8px;
}

.history-date {
  min-width: 100px;
}

.history-date .date {
  font-weight: 500;
  color: #333;
}

.history-date .time {
  font-size: 12px;
  color: #666;
  margin-top: 4px;
}

.history-content {
  display: flex;
  align-items: center;
  gap: 15px;
}

.status-icon {
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  font-size: 14px;
  background-color: #ffebee;
  color: #d32f2f;
}

.status-icon.on-time {
  background-color: #e8f5e9;
  color: #2e7d32;
}

.record-text {
  font-size: 14px;
  color: #333;
}

.record-note {
  font-size: 14px;
  color: #666;
  margin-left: 15px;
}

.empty-history {
  text-align: center;
  padding: 30px;
  color: #666;
  background-color: #f5f5f5;
  border-radius: 8px;
}
</style>